import { h, VNode } from 'snabbdom'
import { IDomEditor, SlateElement } from '@wangeditor/editor'
/**
 * 渲染“附件”元素到编辑器
 * @param elem 附件元素，即上文的 myResume
 * @param children 元素子节点，void 元素可忽略
 * @param editor 编辑器实例
 * @returns vnode 节点（通过 snabbdom.js 的 h 函数生成）
 */
export function renderAttachment(elem, children, editor) {                                                // JS 语法
    // 获取“附件”的数据，参考上文 myResume 数据结构
    const { fileName = '', link = '' } = elem
    // 附件 icon 图标 vnode
    const iconVnode = h(
        // HTML tag
        'img',
        // HTML 属性
        {
            props: { src: 'http://localhost:3600/static/img/logo.9cc22d35.png' }, // HTML 属性，驼峰式写法
            style: { width: '1em', marginRight: '0.1em',  /* 其他... */ } // HTML style ，驼峰式写法
        }
        // img 没有子节点，所以第三个参数不用写
    )
    // 附件元素 vnode
    const attachVnode = h(
        // HTML tag
        'span',
        // HTML 属性、样式、事件
        {
            props: { contentEditable: false }, // HTML 属性，驼峰式写法
            style: { display: 'inline-block', marginLeft: '3px', /* 其他... */ }, // style ，驼峰式写法
            on: { click() { console.log('clicked', link) }, /* 其他... */ }
        },
        // 子节点
        [iconVnode, fileName]
    )
    return attachVnode
}
